<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <style type="text/css">
        .box1 {
            margin-left: 30%;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 15px;
            width: 600px;
            min-width: 600px;
            max-width: 600px;
            height: 380px;
            min-height: 380px;
            max-height: 380px;
        }

        .right {
            position: absolute;
            left: 30%;
            padding-left: 190px;
            display: inline-block;
        }
    </style>
    <base th:href="${#httpServletRequest.getContextPath()} + '/'">
    <link rel="stylesheet" href="css/supersized.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/supersized.3.2.7.min.js"></script>
    <script src="js/supersized-init.js"></script>
</head>
<body>
<div class="box1" style="position: absolute;top:150px">
    <fieldset class="layui-elem-field layui-field-title"
              style="text-align: center;margin-bottom: 0">
        <legend style="font-size: 30px;font-weight:bolder; margin-bottom: 30px">人事管理系统</legend>
    </fieldset>
    <div th:if="${param.error}" style="margin-bottom: 10px;margin-left: 20px;font-size: 20px">
        <i class="layui-icon layui-icon-face-cry" style="font-size: 25px"></i>
        <span th:if="${#strings.trim(param.error) eq 'verify_error'}" th:text="验证码错误"></span>
        <span th:unless="${#strings.trim(param.error) eq 'verify_error'}" th:text="用户名或密码错误"></span>
    </div>
    <div>
        <div style="float: left;margin:0 20px 0 25px">
            <img src="images/headIcon.jpg" alt="头像"
                 style="border-radius: 10px;" width="150px">
        </div>
        <div style="display: inline-block">
            <form class="layui-form layui-form-pane" action="user/do/login" method="post">
                <div class="layui-form-item" style="margin-bottom: 4%;">
                    <label class="layui-form-label" style="font-weight:bolder;height: 40px"><i
                            class="layui-icon layui-icon-username"></i>账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="idOrPhone" required lay-verify="required" lay-reqtext="账号或手机号不能为空"
                               placeholder="请输入账号或手机号" class="layui-input"
                               style="display:inline-block;width:270px;height: 40px">
                    </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 4%;height:40px">
                    <label class="layui-form-label" style="font-weight:bolder;height: 40px"><i
                            class="layui-icon layui-icon-password"></i>密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" lay-reqtext="密码不能为空"
                               placeholder="请输入密码" class="layui-input"
                               style="width:270px;height: 40px;padding-right: 90px;">
                    </div>
                    <div style="position: relative;right:-300px; top:-30px;z-index: 2;">
                        <a href="javascript:forget()">忘记密码?</a>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-bottom: 4%;height:40px">
                    <label class="layui-form-label" style="font-weight:bolder;height: 40px"><i
                            class="layui-icon layui-icon-vercode"></i>验证码</label>
                    <div class="layui-input-block">
                        <input type="text" name="code" required lay-verify="required" lay-reqtext="验证码不能为空"
                               placeholder="请输入验证码"
                               autocomplete="off"
                               class="layui-input"
                               style="width:270px;height: 40px;padding-right: 150px;">
                    </div>
                    <div style="position: relative; right: -258px;top:-40px;z-index: 2;">
                        <img src="user/get/verify/code" alt="图片不存在" id="checkImg">
                    </div>
                </div>
                <div class="layui-input-block layui-form-item">
                    <button class="layui-btn" lay-submit lay-filter="formDemo" id="login"
                            style="margin-top: 10px;margin-left: 10px;width: 260px">登录
                    </button>
                </div>
                <div class="layui-input-block layui-form-item"
                     style="position: relative;  top: -53px;left:-280px">
                    <button class="layui-btn" id="register"
                            style="width: 260px">注册
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    layui.use(['element', 'layer', 'jquery', 'form'], function () {
        const layer = layui.layer;
        const $ = layui.jquery;
        const img = $("#checkImg");

        img.click(function () {
            $("#checkImg").attr({src: "user/get/verify/code?" + new Date().getTime()});
        })

        $('#register').on('click', function () {
            layer.open({
                type: 2,
                title: ['注册信息', 'font-size:25px;font-weight: bolder'],
                area: ['630px', '510px'],
                shadeClose: false,
                content: 'user/register.html'
            });
        });
    });

    function forget() {
        layer.open({
            type: 2,
            title: ['忘记密码', 'font-size:25px;font-weight: bolder'],
            area: ['630px', '350px'],
            shadeClose: false,
            content: 'forget-password.html'
        });
    }
</script>
</body>
</html>